<template>
	<view class="layout" :class="{ skelett: isSkelett }">
		<view class="layout-main">
			<view
				class="layout-main-item"
				:key="index"
				v-for="(item, index) in bankList"
				@click="handleClickBank(item)"
				:class="{ active: item.code === activeCode && !isSkelett }"
			>
				<view class="layout-main-item-left">
					<image :src="item.icon" />
				</view>

				<view class="layout-main-item-center">
					<text>{{ item.name }}</text>
				</view>

				<view class="layout-main-item-right">
					<text>{{ item.typeName || '借记卡' }}</text>
				</view>
			</view>
		</view>

		<DistributionHint :type="isHintStatus" />
	</view>
</template>

<script>
import { getbankList } from '@/api/other';
import { defaultImageUrl } from '@/utils';

import DistributionHint from '@/components/distributionHint';

export default {
	data() {
		return {
			isSkelett: true,
			bankList: [{}, {}, {}],

			isHintStatus: '', // nomore  nodata
			activeCode: undefined,

			requestParams: {
				pageIndex: 1,
				pageSize: 20
			}
		};
	},

	created() {
		this.getCurrentPageData();
	},

	onLoad(params) {
		this.activeCode = params?.code;
	},

	methods: {
		getCurrentPageData(pageIndex = this.requestParams.pageIndex) {
			const {
				requestParams: { pageSize }
			} = this;

			const params = {
				pageIndex,
				pageSize
			};

			getbankList(params).then((res) => {
				const { code, data } = res;

				if (code !== 200) {
					return;
				}

				const isPageIndex = pageIndex === 1;
				const filterData = (data || []).map((item) => {
					let { icon, ...otherParams } = item;
					icon = icon || '/bank/bank-other.png';

					const newIcon = icon.startsWith('\/') ? icon.substr(1) : icon;

					return {
						...otherParams,
						icon: `${defaultImageUrl}${newIcon}`
					};
				});

				this.isSkelett = false;
				this.requestParams.pageIndex = pageIndex;
				this.bankList = isPageIndex ? filterData : [...this.bankList, ...filterData];
				this.isHintStatus = isPageIndex && !filterData.length ? 'nodata' : filterData.length < pageSize ? 'nomore' : '';
			});
		},

		handleClickBank(params) {
			if (!Object.keys(params).length) {
				return;
			}

			const { code, name } = params || {};
			if (params?.code === this.activeCode) {
				uni.navigateBack();
				return;
			}

			/* eslint-disable */
			const pages = getCurrentPages();
			const beforePage = pages[pages.length - 2];

			if (beforePage?.$vm.changeBankInfo) {
				beforePage.$vm.changeBankInfo({
					bankName: name,
					bankCode: code
				});
				uni.navigateBack();
			}
			/* eslint enable */
		}
	},

	onReachBottom() {
		const {
			isSkelett,
			isHintStatus,
			requestParams: { pageIndex }
		} = this;

		if (isHintStatus || isSkelett) {
			return;
		}

		this.isHintStatus = 'loading';
		this.getCurrentPageData(pageIndex + 1);
	},

	components: {
		DistributionHint
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.layout {
	padding: 0 28rpx;
	@include Db_iosBottomDistance(0rpx);

	&-main {
		margin-top: 22rpx;

		&-item {
			margin-top: 16rpx;
			height: 120rpx;
			background: #fff;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			padding: 20rpx 44rpx 20rpx 28rpx;

			&-left {
				font-size: 0;
				width: 80rpx;

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					// box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.17);
				}
			}

			&-center {
				color: #1f1f1f;
				font-size: 30rpx;
				font-weight: bold;
				padding-left: 22rpx;

				flex: 1;
			}

			&-right {
				width: 140rpx;
				text-align: right;

				text {
					color: #007eff;
					font-size: 24rpx;

					padding: 8rpx 16rpx;
					background: #e8f1ff;
					border-radius: 8rpx;
				}
			}

			&.active {
				background: #ececec;
				border: 2rpx solid #dbdbdb;
			}

			&:first-child {
				margin-top: 0;
			}
		}
	}

	&.skelett {
		.layout-main-item-left {
			border-radius: 50%;
			background: $skelettBgColor;

			image {
				visibility: hidden;
			}
		}

		.layout-main-item-center {
			text {
				width: 150rpx;
				height: 40rpx;
				border-radius: 8rpx;
				display: inline-block;
				background: $skelettBgColor;
			}
		}

		.layout-main-item-right {
			width: 100rpx;
			border-radius: 8rpx;
			background: $skelettBgColor;

			text {
				visibility: hidden;
			}
		}
	}
}
</style>
